<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习5</title>
  <script src="../js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#CheckedAll").click(function () {
        $("input[type=checkbox][name=items]").prop("checked", true);
      })
      $("#CheckedNo").click(function () {
        $("input[type=checkbox][name=items]").prop("checked", false);
      })
      $("#CheckedRev").click(function () {
        $("input[type=checkbox][name=items]").each(function () {
          if (this.checked) {
            $(this).prop("checked", false);
          } else {
            $(this).prop("checked", true);
          }
        })
      })
      $("#checkedAll_2").click(function () {
        if (this.checked) {
          $("input[type=checkbox][name=items]").prop("checked", true);
        } else {
          $("input[type=checkbox][name=items]").prop("checked", false);
        }
      })
    })
  </script>
</head>
<body>
<form method="post" action="">
  请选择您的爱好!
  <br><input type="checkbox" id="checkedAll_2"/>全选/全不选
  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="游泳"/>游泳
  <input type="checkbox" name="items" value="唱歌"/>唱歌
  <br/>
  <input type="button" id="CheckedAll" value="全　选"/>
  <input type="button" id="CheckedNo" value="全不选"/>
  <input type="button" id="CheckedRev" value="反　选"/>

  <input type="button" id="send" value="提　交"/>
</form>
</body>
</html>
